<template>
  <div class="container">
    <!-- 标题区域 -->
    <div class="section-header">
      <h2>公告中心</h2>
    </div>
    
    <!-- 搜索区域 -->
    <div class="search-section">
      <el-card class="search-form">
        <el-form :inline="true" :model="searchParams" class="compact-form">
          <el-form-item label="标题" class="form-item-compact">
            <el-input v-model="searchParams.title" placeholder="请输入公告标题" clearable></el-input>
          </el-form-item>
          <el-form-item label="类型" class="form-item-compact">
            <el-select v-model="searchParams.type" placeholder="请选择公告类型" clearable>
              <el-option
                v-for="item in noticeTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布时间" class="form-item-compact">
            <el-date-picker
              v-model="searchParams.startDate"
              type="date"
              placeholder="开始日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              class="date-picker-compact"
            ></el-date-picker>
            <span class="date-separator">至</span>
            <el-date-picker
              v-model="searchParams.endDate"
              type="date"
              placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              class="date-picker-compact"
            ></el-date-picker>
          </el-form-item>
          <el-form-item class="form-item-compact">
            <el-button type="primary" @click="searchNotices">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    
    <!-- 操作按钮 -->
    <div class="search-section">
      <el-button class="add-button" @click="showAddDialog">发布新公告</el-button>
    </div>
    
    <!-- 公告画廊 -->
    <div class="scroll-gallery">
      <div class="empty-state" v-if="noticeList.length === 0">
        <div class="empty-icon">
          <el-icon><Document /></el-icon>
        </div>
        <div class="empty-text">暂无公告数据</div>
        <el-button v-if="isAdmin" type="primary" @click="showAddDialog">发布第一条公告</el-button>
      </div>
      
      <div class="scroll-container" v-else>
        <!-- 使用FeatureCard组件风格展示公告 -->
        <div 
          v-for="(notice, index) in noticeList" 
          :key="notice.id" 
          class="feature-card" 
          :class="getCardTheme(index, notice.type)"
        >
          <div class="card-content">
            <div class="feature-card-label">{{ getNoticeTypeName(notice.type) }}</div>
            <div class="feature-card-headline">{{ notice.title }}</div>
            
            <div class="image-container">
              <img :src="getNoticeImage(notice.type)" :alt="notice.title" />
            </div>
            
            <div class="feature-card-copy">{{ truncateContent(notice.content) }}</div>
            
            <div class="notice-publisher">发布人: {{ notice.publisher }}</div>
            <div class="notice-date">{{ formatDate(notice.publishTime) }}</div>
            
            <div class="modal-trigger-button" :class="getCardTheme(index, notice.type)" @click="viewNoticeDetail(notice.id)">
              <el-icon><ArrowRight /></el-icon>
            </div>
            
            <el-button size="small" type="danger" @click.stop="deleteNotice(notice.id)" style="margin-top: 10px;">
              <el-icon><Delete /></el-icon> 删除
            </el-button>
          </div>
        </div>
      </div>
      
      <!-- 导航按钮 -->
      <div class="paddlenav left-item" @click="scrollGallery('left')">
        <el-icon><ArrowRight style="transform: rotate(180deg)" /></el-icon>
      </div>
      <div class="paddlenav right-item" @click="scrollGallery('right')">
        <el-icon><ArrowRight /></el-icon>
      </div>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pageParams.pageNum"
          v-model:page-size="pageParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageParams.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
        />
      </div>
    </div>
    
    <!-- 公告详情弹窗 -->
    <el-dialog 
      v-model="noticeDetailVisible" 
      title="公告详情" 
      width="600px"
      destroy-on-close
      center
      class="fade-in"
    >
      <div v-if="currentNotice" class="notice-detail">
        <h2 class="detail-title">{{ currentNotice.title }}</h2>
        <div class="detail-info">
          <el-tag :type="getNoticeTypeTag(currentNotice.type)" effect="plain" size="large">
            {{ getNoticeTypeName(currentNotice.type) }}
          </el-tag>
          <div class="detail-meta">
            <div class="meta-item">
              <el-icon><Timer /></el-icon>
              <span>{{ formatDate(currentNotice.publishTime) }}</span>
            </div>
            <div class="meta-item">
              <el-icon><User /></el-icon>
              <span>{{ currentNotice.publisher }}</span>
            </div>
          </div>
        </div>
        <div class="detail-content">
          {{ currentNotice.content }}
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="noticeDetailVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    
    <!-- 添加公告弹窗 -->
    <el-dialog 
      v-model="addNoticeVisible" 
      title="发布公告" 
      width="600px"
      destroy-on-close
      center
      class="fade-in"
    >
      <el-form ref="noticeFormRef" :model="noticeForm" :rules="noticeRules" label-width="100px" class="add-notice-form">
        <el-form-item label="公告类型" prop="type">
          <el-select v-model="noticeForm.type" placeholder="请选择公告类型">
            <el-option label="系统公告" value="system" />
            <el-option label="活动公告" value="activity" />
            <el-option label="紧急通知" value="urgent" />
            <el-option label="其他公告" value="other" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="公告标题" prop="title">
          <el-input v-model="noticeForm.title" placeholder="请输入公告标题" />
        </el-form-item>
        
        <el-form-item label="公告内容" prop="content">
          <el-input 
            v-model="noticeForm.content" 
            type="textarea" 
            :rows="6" 
            placeholder="请输入公告内容" 
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addNoticeVisible = false">取消</el-button>
          <el-button type="primary" @click="submitNoticeForm">发布</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch, computed } from 'vue';
import { Search, Timer, User, ArrowRight, Delete } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import request from '@/utils/request';

// 判断是否为管理员
// 暂时使用固定值，实际项目中应该从状态管理库获取用户信息
const isAdmin = ref(true); // 设置为true表示当前用户是管理员，可以看到所有管理功能
// 实际项目中应该使用如下代码：
// import { useStore } from 'vuex'; // 或者从pinia导入
// const store = useStore();
// const isAdmin = computed(() => {
//   const user = store.state.user;
//   return user && user.role === 'admin';
// });

// 搜索参数
const searchParams = reactive({
  keyword: '',
  type: ''
});

// 分页参数
const pageParams = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0
});

// 公告列表
const noticeList = ref([]);

// 当前查看的公告
const currentNotice = ref(null);
const noticeDetailVisible = ref(false);

// 添加公告相关
const noticeFormRef = ref();
const addNoticeVisible = ref(false);
const noticeForm = reactive({
  type: '',
  title: '',
  content: ''
});

const noticeRules = reactive({
  type: [
    { required: true, message: '请选择公告类型', trigger: 'change' }
  ],
  title: [
    { required: true, message: '请输入公告标题', trigger: 'blur' },
    { min: 2, max: 50, message: '标题长度在2到50个字符之间', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入公告内容', trigger: 'blur' },
    { min: 10, max: 2000, message: '内容长度在10到2000个字符之间', trigger: 'blur' }
  ]
});

// 截断内容显示
const truncateContent = (content) => {
  if (!content) return '';
  return content.length > 100 ? content.substring(0, 100) + '...' : content;
};

// 获取公告类型对应的图片
const getNoticeImage = (type) => {
  const imageMap = {
    system: '/images/system-notice.png',
    activity: '/images/activity-notice.png',
    urgent: '/images/urgent-notice.png',
    other: '/images/other-notice.png'
  };
  return imageMap[type] || '/images/default-notice.png';
};

// 获取公告列表
const fetchNotices = async () => {
  try {
    // ===== 接口位置 =====
    // 接口URL: /notice/page
    // 请求方式: GET
    // 请求参数: 
    //   - pageNum: 当前页码
    //   - pageSize: 每页数量
    //   - keyword: 搜索关键词(可选)
    //   - type: 公告类型(可选)
    // 返回数据格式:
    // {
    //   "code": 200,
    //   "msg": "success",
    //   "data": {
    //     "records": [...公告列表数据],
    //     "total": 总数量,
    //     "size": 每页数量,
    //     "current": 当前页码
    //   }
    // }
    
    // 测试环境下使用模拟数据
    const useTestData = true; // 切换为false可使用真实接口
    
    let res;
    if (useTestData) {
      // 模拟数据
      const testData = {
        code: 200,
        msg: "success",
        data: {
          records: [
            {
              id: 1,
              title: "系统维护通知",
              content: "尊敬的用户，系统将于2023年12月15日凌晨2:00-4:00进行例行维护，届时系统将暂停服务。给您带来的不便，敬请谅解。",
              type: "system",
              publisher: "系统管理员",
              publishTime: "2023-12-10T10:00:00"
            },
            {
              id: 2,
              title: "校园互助平台使用指南",
              content: "为了帮助大家更好地使用校园互助平台，我们编写了详细的使用指南。内容包括：如何发布任务、如何接受任务、如何评价任务完成情况等。请大家仔细阅读，有任何问题可以联系客服。",
              type: "system",
              publisher: "平台运营团队",
              publishTime: "2023-12-05T14:30:00"
            },
            {
              id: 3,
              title: "紧急通知：暴雨预警",
              content: "根据气象部门预报，今明两天将有强降雨，请同学们注意防范，减少外出，确保人身安全。各部门做好防汛准备工作。",
              type: "urgent",
              publisher: "校园安全部",
              publishTime: "2023-12-12T08:15:00"
            },
            {
              id: 4,
              title: "校园歌手大赛报名开始",
              content: "第十届校园歌手大赛报名现已开始！活动时间：2023年12月20日-12月25日。报名方式：扫描下方二维码或前往学生会办公室现场报名。丰厚奖品等你来拿！",
              type: "activity",
              publisher: "校园文艺部",
              publishTime: "2023-12-08T09:00:00"
            },
            {
              id: 5,
              title: "图书馆开放时间调整",
              content: "自2024年1月1日起，图书馆开放时间调整为：周一至周五 8:00-22:00，周六至周日 9:00-21:00。寒假期间另行通知。",
              type: "other",
              publisher: "图书馆管理员",
              publishTime: "2023-12-20T16:45:00"
            }
          ],
          total: 5,
          size: pageParams.pageSize,
          current: pageParams.pageNum
        }
      };
      
      // 模拟搜索和筛选功能
      if (searchParams.keyword || searchParams.type) {
        const filteredRecords = testData.data.records.filter(item => {
          const keywordMatch = !searchParams.keyword || 
            item.title.includes(searchParams.keyword) || 
            item.content.includes(searchParams.keyword);
          
          const typeMatch = !searchParams.type || item.type === searchParams.type;
          
          return keywordMatch && typeMatch;
        });
        
        testData.data.records = filteredRecords;
        testData.data.total = filteredRecords.length;
      }
      
      res = testData;
    } else {
      // 真实接口调用
      res = await request.get('/notice/page', {
        params: {
          pageNum: pageParams.pageNum,
          pageSize: pageParams.pageSize,
          keyword: searchParams.keyword,
          type: searchParams.type
        }
      });
    }
    
    noticeList.value = res.data.records;
    pageParams.total = res.data.total;
  } catch (error) {
    console.error('获取公告列表失败:', error);
    ElMessage.error('获取公告列表失败');
  }
};

// 搜索公告
const searchNotices = () => {
  pageParams.pageNum = 1; // 重置页码
  fetchNotices();
};

// 监听搜索关键词变化
watch(() => searchParams.keyword, (newVal) => {
  if (newVal) {
    searchNotices();
  }
});

// 重置搜索
const resetSearch = () => {
  searchParams.keyword = '';
  searchParams.type = '';
  searchNotices();
};

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageParams.pageSize = val;
  fetchNotices();
};

// 处理页码变化
const handleCurrentChange = (val) => {
  pageParams.pageNum = val;
  fetchNotices();
};

// 滚动画廊控制
const scrollGallery = (direction) => {
  const container = document.querySelector('.scroll-container');
  if (container) {
    const scrollAmount = direction === 'left' ? -300 : 300;
    container.scrollBy({ left: scrollAmount, behavior: 'smooth' });
  }
};

// 获取公告卡片主题类
const getCardTheme = (index, type) => {
  // 根据索引交替使用深色主题
  const isDark = index % 2 === 0;
  // 紧急通知始终使用深色主题
  return type === 'urgent' || isDark ? 'theme-dark' : '';
};

// 查看公告详情
const viewNoticeDetail = async (id) => {
  try {
    // ===== 接口位置 =====
    // 接口URL: /notice/{id}
    // 请求方式: GET
    // 请求参数: 路径参数id
    // 返回数据格式:
    // {
    //   "code": 200,
    //   "msg": "success",
    //   "data": {...公告详情数据}
    // }
    
    // 测试环境下使用模拟数据
    const useTestData = true; // 切换为false可使用真实接口
    
    let res;
    if (useTestData) {
      // 从列表中查找对应id的公告作为模拟数据
      const notice = noticeList.value.find(item => item.id === id);
      if (notice) {
        res = {
          code: 200,
          msg: "success",
          data: notice
        };
      } else {
        throw new Error('公告不存在');
      }
    } else {
      // 真实接口调用
      res = await request.get(`/notice/${id}`);
    }
    
    currentNotice.value = res.data;
    noticeDetailVisible.value = true;
  } catch (error) {
    console.error('获取公告详情失败:', error);
    ElMessage.error('获取公告详情失败');
  }
};

// 删除公告
const deleteNotice = (id) => {
  ElMessageBox.confirm('确定要删除这条公告吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      // ===== 接口位置 =====
      // 接口URL: /notice/{id}
      // 请求方式: DELETE
      // 请求参数: 路径参数id
      // 返回数据格式:
      // {
      //   "code": 200,
      //   "msg": "success",
      //   "data": null
      // }
      
      // 测试环境下使用模拟数据
      const useTestData = true; // 切换为false可使用真实接口
      
      if (useTestData) {
        // 模拟删除操作，从列表中移除对应id的公告
        const index = noticeList.value.findIndex(item => item.id === id);
        if (index !== -1) {
          noticeList.value.splice(index, 1);
          pageParams.total -= 1;
          ElMessage.success('删除成功');
        } else {
          throw new Error('公告不存在');
        }
      } else {
        // 真实接口调用
        await request.delete(`/notice/${id}`);
        ElMessage.success('删除成功');
        fetchNotices();
      }
    } catch (error) {
      console.error('删除公告失败:', error);
      ElMessage.error('删除公告失败');
    }
  }).catch(() => {
    // 取消删除
  });
};

// 显示添加公告弹窗
const showAddDialog = () => {
  // 重置表单
  Object.keys(noticeForm).forEach(key => {
    noticeForm[key] = '';
  });
  addNoticeVisible.value = true;
};

// 提交公告表单
const submitNoticeForm = () => {
  noticeFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        // ===== 接口位置 =====
        // 接口URL: /notice
        // 请求方式: POST
        // 请求参数: 
        // {
        //   "type": "公告类型",
        //   "title": "公告标题",
        //   "content": "公告内容"
        // }
        // 返回数据格式:
        // {
        //   "code": 200,
        //   "msg": "success",
        //   "data": null
        // }
        
        // 测试环境下使用模拟数据
        const useTestData = true; // 切换为false可使用真实接口
        
        if (useTestData) {
          // 模拟添加操作，生成新的公告并添加到列表
          const newNotice = {
            id: Date.now(), // 使用时间戳作为临时ID
            ...noticeForm,
            publisher: '当前用户',
            publishTime: new Date().toISOString()
          };
          
          // 添加到列表开头
          noticeList.value.unshift(newNotice);
          pageParams.total += 1;
          
          ElMessage.success('发布成功');
          addNoticeVisible.value = false;
        } else {
          // 真实接口调用
          await request.post('/notice', noticeForm);
          ElMessage.success('发布成功');
          addNoticeVisible.value = false;
          fetchNotices();
        }
      } catch (error) {
        console.error('发布公告失败:', error);
        ElMessage.error('发布公告失败');
      }
    }
  });
};

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return date.toLocaleString();
};

// 获取公告类型标签样式
const getNoticeTypeTag = (type) => {
  const typeMap = {
    system: 'info',
    activity: 'success',
    urgent: 'danger',
    other: ''
  };
  return typeMap[type] || '';
};

// 获取公告类型名称
const getNoticeTypeName = (type) => {
  const typeMap = {
    system: '系统公告',
    activity: '活动公告',
    urgent: '紧急通知',
    other: '其他公告'
  };
  return typeMap[type] || '未知类型';
};

// 页面加载时获取公告列表
onMounted(() => {
  fetchNotices();
});
</script>

<style scoped>
/* 定义基础容器组件 */
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 响应式断点配置 */
@media (max-width: 734px) {
  .container {
    padding: 1rem 0;
  }
}

/* 标题组件 */
.section-header {
  width: 100%;
}

.section-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  color: #1d1d1f;
}

@media (max-width: 734px) {
  .section-header h2 {
    font-size: 2rem;
  }
}

/* 卡片基础组件 */
.feature-card {
  width: 300px;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 深色主题变体 */
.feature-card.theme-dark {
  background-color: #1d1d1f;
}

.feature-card.theme-dark .feature-card-copy,
.feature-card.theme-dark .feature-card-headline,
.feature-card.theme-dark .notice-publisher {
  color: #f5f5f7;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

/* 响应式宽度调整 */
@media (max-width: 1068px) {
  .feature-card {
    width: 280px;
  }
}

@media (max-width: 734px) {
  .feature-card {
    width: 90%;
  }
}

/* 卡片内容区 */
.card-content {
  padding: 2.5rem 2rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-card-label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
  color: #0071e3;
}

.feature-card-headline {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 2rem;
  color: #1d1d1f;
}

@media (max-width: 734px) {
  .feature-card-headline {
    font-size: 1.25rem;
  }
}

.feature-card-copy {
  color: #333;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* 图片容器组件 */
.image-container {
  width: 100%;
  height: 200px;
  margin-bottom: 2rem;
  overflow: hidden;
}

/* 响应式高度调整 */
@media (max-width: 1068px) {
  .image-container {
    height: 180px;
  }
}

@media (max-width: 734px) {
  .image-container {
    height: 160px;
  }
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.image-container:hover img {
  transform: scale(1.05);
}

/* 模态框触发按钮 */
.modal-trigger-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

.modal-trigger-button:hover {
  background-color: rgba(0,0,0,0.2);
  transform: scale(1.1);
}

.modal-trigger-button svg {
  width: 20px;
  height: 20px;
  fill: #1d1d1f;
}

.modal-trigger-button.theme-dark svg {
  fill: #f5f5f7;
}

/* 滚动画廊容器 */
.scroll-gallery {
  width: 100%;
  overflow-x: auto;
  padding: 2rem 0;
  position: relative;
}

.scroll-container {
  display: flex;
  gap: 2rem;
  padding: 1rem 2rem 2rem;
  /* 触摸滚动优化 */
  -webkit-overflow-scrolling: touch;
  /* 隐藏滚动条但保留功能 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.scroll-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* 导航按钮 */
.paddlenav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(255,255,255,0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  cursor: pointer;
  z-index: 10;
}

.paddlenav.left-item {
  left: 10px;
}

.paddlenav.right-item {
  right: 10px;
}

.paddlenav:hover {
  background-color: rgba(255,255,255,1);
}

.paddlenav svg {
  width: 16px;
  height: 16px;
  fill: #1d1d1f;
}

/* 搜索区域样式 */
.search-section {
  width: 100%;
  max-width: 1200px;
  margin-bottom: 1rem;
  padding: 0 1rem;
}

.search-form {
  background-color: #f5f5f7;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.compact-form {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
}

.form-item-compact {
  margin-bottom: 0 !important;
  margin-right: 0.5rem !important;
}

.form-item-compact :deep(.el-form-item__label) {
  padding-right: 0.5rem;
}

.date-picker-compact {
  width: 130px;
}

.date-separator {
  margin: 0 0.25rem;
  color: #666;
}

@media (max-width: 1200px) {
  .compact-form {
    flex-wrap: wrap;
  }
  
  .form-item-compact {
    margin-bottom: 0.5rem !important;
  }
}

/* 详情弹窗样式 */
.notice-detail {
  padding: 2rem;
}

.detail-title {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  font-weight: 700;
  color: #1d1d1f;
}

.detail-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  color: #666;
  font-size: 0.875rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.detail-content {
  line-height: 1.8;
  white-space: pre-wrap;
  padding: 1rem 0;
  color: #333;
}

/* 添加公告表单样式 */
.add-notice-form {
  padding: 1rem;
}

/* 分页控件样式 */
.pagination-container {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.empty-state-icon {
  font-size: 4rem;
  color: #d2d2d7;
  margin-bottom: 1.5rem;
}

.empty-state-text {
  font-size: 1.25rem;
  color: #86868b;
  margin-bottom: 2rem;
}

.add-button {
  background-color: #0071e3;
  color: white;
  border: none;
  border-radius: 980px;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-button:hover {
  background-color: #0077ed;
  transform: scale(1.05);
}

/* 通用动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}
</style>